<div *ngIf="displayType === 'distribution'">
    <h5>ESG Risk Rating Distribution</h5>
    <div *ngIf="benchmarkData && displayRatingDistribution" class="mb-5">
        <div ratingDistributionChart [chartID]="'benchmarkchart'" [chartData]="benchmarkData"
            [companyName]="currentCompanyName" [showRiskLevels]="true" [riskLevels]="riskClusters" [companyRiskLevel]="companyClusterCode"
            [primaryName]="'universe'" [secondaryName]="'industry'"  [tertiaryName]="'subIndustry'" [colors]="ratingDistributionChartColors"
            [graphFontSize]="9" style="padding:0px; margin-bottom: 20px;">
            <div id='benchmarkchart' style="height: 90px;"></div>
            <div id='benchmarkChartAxis' style="height: 10px; margin-top: 0px;"></div>
        </div>
    </div>

    <div benchmarkChart *ngIf="benchmarkData && !displayRatingDistribution" [chartID]="'benchmarkchart'" [chartData]="benchmarkData"
        [companyName]="currentCompanyName" [showRiskLevels]="true" [riskLevels]="riskClusters" [companyRiskLevel]="companyClusterCode"
        [primaryName]="'universe'" [secondaryName]="'industry'"  [tertiaryName]="'subIndustry'" [colors]="ratingDistributionChartColors" [riskRatingChart]="true"
        [graphFontSize]="9" style="padding:0px; margin-bottom: 40px;">
        <div id='benchmarkchart' style="height: 90px;"></div>
        <div id='benchmarkChartAxis' style="height: 10px; margin-top: 0px;"></div>
    </div>

    <table *ngIf="benchmarkData && universe && subIndustry && industry" class="rankingTable table table-sm mt-4">
        <thead>
            <tr>
                <th style="width: 40%">&nbsp;</th>
                <th style="width: 30%">
                    Rank
                    <div class="small">(1<sup>st</sup> = lowest risk)</div>
                </th>
                <th style="width: 30%">
                    Percentile
                    <div class="small">(1<sup>st</sup> = lowest risk)</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div class="chart-legend-block mr-1 bg-universe"></div> Global Universe</td>
                <td><strong>{{ universe.performance.rank | number }}</strong> out of {{ universe.performance.count | number }}</td>
                <td><strong>{{ formatRank(universe.performance.percentile) }}</strong></td>
            </tr>
            <tr>
                <td><div class="chart-legend-block mr-1 bg-industry"></div> {{ company?.peerGroup }} <span class="small">(Industry Group)</span></td>
                <td><strong>{{ industry.performance.rank | number }}</strong> out of {{ industry.performance.count | number }}</td>
                <td><strong>{{ formatRank(industry.performance.percentile) }}</strong></td>
            </tr>
            <tr>
                <td><div class="chart-legend-block mr-1 bg-subIndustry"></div> {{ company?.subPeerGroup }} <span class="small">(SubIndustry)</span></td>
                <td><strong>{{ subIndustry.performance.rank | number }}</strong> out of {{ subIndustry.performance.count | number }}</td>
                <td><strong>{{ formatRank(subIndustry.performance.percentile) }}</strong></td>
            </tr>
        </tbody>
    </table>

    <!--div *ngIf="benchmarkData && !displayRatingDistribution" class="mt-4">
        <div class="chart-legend-block mr-1 bg-subIndustry"></div> {{ company?.subPeerGroup }} <span class="small">(SubIndustry)</span>
    </div>-->
</div>

<div *ngIf="displayType === 'scatter'">
    <div scatterChart *ngIf="exposureData && subIndustry" [chartID]="'scatterchart'" [chartData]="exposureData"
        [peersList]="subIndustry.peersList"
        [verticalAxisName]="'Management'" [verticalAxisMax]="maxManagement"
        [horizontalAxisName]="'Exposure'" [horizontalAxisMax]="maxExposure" 
        [subIndustryAverageExposure]="subIndustryAverageExposure"
        [subIndustryAverageManagement]="subIndustryAverageManagement"
        [gridAlpha]="0" [axisAlpha]="0.3" [universeSize]=4 [universeColor]="'#CCCCCC'">
        <div id="scatterchart" style="height:360px;"></div>
    </div>

    <div class="mt-4 ml-5 secondary-text">
        <div>
            <div class="chart-legend-circle mr-2 bg-universe"></div> Global Universe
        </div>
        <div>
            <div class="chart-legend-circle mr-2 bg-subIndustry"></div> {{ company?.subPeerGroup }} <span class="small">(SubIndustry)</span>
        </div>
        <div>
            <div class="chart-legend-circle mr-2 bg-black"></div> {{ company?.companyName }}
        </div>
        <div>
           <div> <span class="chart-legend-cross">+</span> <span>SubIndustry Avg.</span></div> 
        </div>
    </div>
</div>
